<template>
  <div class="component-profile">
    <div class="head_search">
      <div class="head_title">
        <div class="main_title">个人介绍</div>
        <div class="sub_title">把简历改成你想要的样子吧！</div>
      </div>
      <div class="search_btn">
        <img src="@/assets/icons/Set.svg" alt="" />
      </div>
    </div>
    <div class="head_portrait">
      <div class="photo">
        <div class="edit">
          <img src="@/assets/icons/edit.svg" alt="" />
        </div>
      </div>
    </div>
    <div class="user_info">
      <div class="user_name">Satria Aditya Senja</div>
      <div class="user_tel">+62 85703901231</div>
    </div>
    <div class="referral_code">
      <div class="title">你的邀请码</div>
      <div class="code">
        <div class="code_num">kopisenja123</div>
        <div class="copy">
          <img src="@/assets/icons/copy.svg" alt="" />
        </div>
      </div>
    </div>
    <div class="user_wallet">
      <div class="wallet_icon">
        <img src="@/assets/icons/wallet.svg" alt="" />
      </div>
      <div class="line"></div>
      <div class="wallet_infor">
        <div class="title">钱包</div>
        <div class="money">$5000,382</div>
      </div>
      <div class="wallet_details">
        <img src="@/assets/icons/point.svg" alt="" />
      </div>
    </div>
    <div class="user_settings">
      <div
        class="setting_menu"
        v-for="(item, index) in settingList"
        :key="index"
        @click="switchTab(item.path)"
      >
        <div class="icon"><img :src="item.img" alt="" /></div>
        <div class="title">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();
    const switchTab = (path: string) => {
      router.push(path);
    };
    const settingList = ref([
      // {
      //   img: require("@/assets/icons/help.svg"),
      //   name: "Help",
      // },
      {
        img: require("@/assets/icons/coffee.svg"),
        name: "咖啡市场",
        path: "/ourMenu",
      },
      {
        img: require("@/assets/icons/shopping.svg"),
        name: "历史订单",
        path: "/historyOrder",
      },
      {
        img: require("@/assets/icons/love.svg"),
        name: "我的收藏",
        path: "/myCollection",
      },
      {
        img: require("@/assets/icons/close.svg"),
        name: "退出登录",
        path: "/login",
      },
    ]);
    return {
      settingList,
      switchTab,
    };
  },
});
</script>

<style lang="less" scoped>
.component-profile {
  background: url("~@/assets/images/pureImg.jpg");
  padding-bottom: 70px;
  .head_search {
    display: flex;
    justify-content: space-between;
    padding: 116px 64px 0px 60px;
    .head_title {
      .main_title {
        font-size: 46px;
        text-align: left;
        font-family: Helvetica;
        color: #ffffff;
        line-height: 62px;
      }
      .sub_title {
        font-size: 28px;
        font-family: Helvetica;
        color: #ffffff;
        line-height: 34px;
      }
    }
    .search_btn {
      width: 96px;
      height: 96px;
      background: #ffffff;
      box-shadow: 0px 72px 234px 0px #35405a;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 48px;
        height: 48px;
      }
    }
  }
  .head_portrait {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 82px 0px 32px;
    .photo {
      width: 278px;
      height: 278px;
      position: relative;
      background: #1c2238;
      border-radius: 50%;
      .edit {
        width: 84px;
        height: 84px;
        position: absolute;
        right: 0px;
        bottom: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ffffff;
        border: 6px solid #efcfaa;
        border-radius: 50%;
        img {
          width: 32px;
          height: 32px;
        }
      }
    }
  }
  .user_info {
    text-align: center;
    .user_name {
      margin-bottom: 18px;
      font-size: 48px;
      font-family: Helvetica;
      color: #442916;
      line-height: 58px;
    }
    .user_tel {
      font-size: 28px;
      font-family: Helvetica;
      color: #442916;
      line-height: 34px;
    }
  }
  .referral_code {
    margin: 60px 48px 32px;
    padding: 36px 38px 30px 38px;
    background: #f6a44e;
    box-shadow: 0px 64px 100px 0px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    .title {
      margin-bottom: 22px;
      font-size: 36px;
      font-family: Avenir-Medium, Avenir;
      font-weight: 500;
      color: #ffffff;
      line-height: 50px;
    }
    .code {
      padding: 0px 0px 0px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(
        289deg,
        rgba(255, 227, 184, 0) 0%,
        #ffc282 100%
      );
      border-radius: 16px;
      border: 2px solid rgba(68, 41, 22, 0.16);
      .code_num {
        font-size: 36px;
        font-family: Avenir-Black, Avenir;
        font-weight: 900;
        color: #ffffff;
        line-height: 50px;
        letter-spacing: 12px;
      }
      .copy {
        width: 112px;
        height: 96px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #442916;
        border-radius: 16px;
        img {
          width: 28px;
          height: 34px;
          color: #f6a44e;
        }
      }
    }
  }
  .user_wallet {
    margin: 0px 48px;
    padding: 32px 54px 30px 32px;
    display: flex;
    align-items: center;
    background: #ffffff;
    box-shadow: 0px 64px 100px 0px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    .wallet_icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 64px;
      height: 64px;
      background: #fff6f0;
      border-radius: 10px;
      img {
        width: 34px;
        height: 26px;
      }
    }
    .line {
      width: 4px;
      height: 74px;
      margin: 0px 38px;
      opacity: 0.3;
      background-color: #979797;
    }
    .wallet_infor {
      flex: 1;
      .title {
        margin-bottom: 8px;
        font-size: 24px;
        font-family: Avenir-Book, Avenir;
        font-weight: normal;
        color: #8d8d8d;
        line-height: 32px;
      }
      .money {
        font-size: 32px;
        font-family: Avenir-Heavy, Avenir;
        font-weight: 800;
        color: #000000;
        line-height: 44px;
      }
    }
    .wallet_details {
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        // width: 40px;
        height: 40px;
      }
    }
  }
  .user_settings {
    margin: 32px 48px 0 48px;
    padding: 0px 32px;
    background: #ffffff;
    box-shadow: 0px 64px 100px 0px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    .setting_menu {
      padding: 32px 0px;
      display: flex;
      align-items: center;
      border-bottom: 2px solid rgba(151, 151, 151, 0.19);
      .icon {
        width: 64px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 24px;
        background: #fff6f0;
        border-radius: 10px;
        img {
          width: 32px;
          height: 32px;
        }
      }
      .title {
        font-size: 32px;
        font-family: Helvetica;
        color: #333333;
        line-height: 38px;
      }
    }
  }
  .user_settings .setting_menu:last-child {
    border: none;
  }
}
</style>